import React from 'react';
import {Image, Modal, StatusBar, Text, TouchableOpacity, View, StyleSheet, DeviceEventEmitter} from 'react-native';
import Constants from '../utils/Constants';
import screen from '../utils/screen';
import {filterErrorMsg, FontFamily, getffly} from '../utils/common';
import {AppModal} from '../widgets/modal';
import Images from '../images/Images';


export default  class SortDialog extends React.Component {

    constructor(props) {
        super(props);


    }

    state={
        modalVisible:false,

    }


    componentDidMount = () => {

    }



    logout = ()=>{
        this.hideDialog()
        this.onConfirm && this.onConfirm();

    }



    hideDialog = () => {

        this.setState({ modalVisible: false });
    }

    show = ()=>{

        this.setState({
            modalVisible:true
        })
    }




    render() {




        return (
            <Modal
                animationType={'none'}
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => { this._setModalVisible(false) }}
                onShow={this.startShow}
            >
                <StatusBar barStyle='light-content' translucent={true} backgroundColor="rgba(16, 17, 22,0.75)" animated={false} />
                <TouchableOpacity
                    activeOpacity={1.0}
                    onPress={() => {

                    }}
                    style={styles.bottomcontainer}>

                    <View style={styles.container}>

                        <View style={styles.innerContainer}>

                            {
                                this.props.data.map((item,index)=>{
                                    const isSelect = this.props.curIndex === index
                                    return (
                                        <Text style={[styles.title,{color:isSelect ? '#377C74' : 'rgba(0,0,0,0.2)'}]}
                                              key={index.toString()}
                                              onPress={()=>{
                                                  this.props.onSelect && this.props.onSelect(index)
                                                  this.hideDialog()
                                              }}
                                        >{item.subTitle}</Text>
                                    )
                                })
                            }



                        </View>

                        <TouchableOpacity
                            style={{marginTop:screen.PIXEL_60}}
                            onPress={()=>{
                                this._setModalVisible(false)
                            }}
                        >
                            <Image source={Images.close} style={styles.close}/>
                        </TouchableOpacity>


                    </View>

                </TouchableOpacity>
            </Modal>
        );
    }


    _setModalVisible = (visible) => {
        this.setState({ modalVisible: visible });
    }

    startShow = () => {

    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    innerContainer: {
        width: screen.width - screen.PIXEL_100,
        padding:screen.PIXEL_80,
        backgroundColor: '#FFFFFF',
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: screen.PIXEL_50
    },

    close:{
        width:screen.PIXEL_70,
        height:screen.PIXEL_70
    },
    bottomcontainer: {
        zIndex: 2,
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'rgba(16, 17, 22,0.75)',
        justifyContent: 'flex-end',
    },
    title:{
        color:'#377C74',fontSize:16,fontFamily:getffly(FontFamily.medium),textAlign:'center',marginBottom:screen.PIXEL_30
    },


});



